<template>
	<view>
		<view class="">
			<image src="../../../../static/img/index/zixun.png" mode="widthFix" class="w-max"></image>
		</view>
		<view class="flex row-center mt50 mb50">
			<image src="../../../../static/img/index/zixun2.png" class="w350 h40"></image>
		</view>
		<view class="mr20 ml20    radius16 pb40">
			<u-form :model="form" ref="uForm" label-position="top">
				<u-form-item :border-bottom='false'>
					<view class="industrybox u-border pl20 flex col-center pr20 ">
						<text class="mr10">手机</text>
						<u-input v-model="form.iphone" placeholder="（必填）" height="110" />
					</view>
				</u-form-item>
				<u-form-item :border-bottom='false'>
					<view class="industrybox u-border pl20 flex col-center pr20 ">
						<text class="mr10">验证码</text>
						<u-input v-model="form.code" placeholder="（必填）" height="110" />
						<text @tap="getCode" style="color: #2B85E4;">{{tips}}</text>
					</view>
				</u-form-item>
				<u-form-item :border-bottom='false'>
					<view class="industrybox u-border pl20 flex col-center pr20 ">
						<text class="mr10">姓名</text>
						<u-input v-model="form.name" placeholder="（必填）" height="110" />
					</view>
				</u-form-item>
				<u-form-item :border-bottom='false'>
					<view class="flex w-max row-between bg-f pl20 h110 col-center pr20 u-border" v-if="form.address"
						@click="showshengfen=true">
						<text>{{form.address}}</text>
						<u-icon name="arrow-down" color="#379DE1"></u-icon>
					</view>
					<view class="flex w-max row-between bg-f" v-else @click="showshengfen=true">
						<view class="h100 u-border addbox">
							<text>省份</text>
							<text>请选择</text>
							<u-icon name="arrow-down" color="#379DE1"></u-icon>
						</view>
						<view class="h100 u-border addbox">
							<text>城市</text>
							<text>请选择</text>
							<u-icon name="arrow-down" color="#379DE1"></u-icon>
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom='false'>
					<view class="industrybox u-border pl20 flex col-center pr20 ">
						<text class="mr10">企业名称</text>
						<u-input v-model="form.enterprise_name" placeholder="（必填）" height="110" />
					</view>
				</u-form-item>
				<u-form-item :border-bottom='false'>
					<view class="industrybox u-border pl20 flex col-center pr20 ">
						<!-- <text class="mr30">行业</text>
							<text class="color9">请选择</text> -->
						<text class="mr10">行业</text>
						<u-input v-model="form.industry" placeholder="" height="110" />
						<!-- <u-icon name="arrow-down" color="#379DE1"></u-icon> -->
					</view>
				</u-form-item>
				<view class="mt40 text-center" >
					<radio :checked='showradio' color="#FEC242" @click="showradio=!showradio"></radio>
					<text class="color9 mr6">我已阅读并同意 </text>
					<text class="hrefbox" @click="$jump('/pages/registrationAgreement/registrationAgreement?type=2')">隐私保护协议</text>
				</view>
				<view class="subBtn" @tap="submit">
					提交
				</view>
			</u-form>
		</view>
		<u-picker v-model="showshengfen" mode="region" @confirm="addString"></u-picker>
		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
			@change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		name: "freeQuestion",
		onLoad() {
			this.getarea()
		},
		data() {
			return {
				//验证码倒计时
				seconds: 60,
				//获取验证码
				tips: '获取验证码', 
				//显示省份的弹层
				showshengfen: false,
				//地址列表
				addList: [],
				form: {
					// 企业名称
					enterprise_name: '',
					//姓名
					name: '',
					// 手机号
					iphone: '',
					//
					code: '',
					//
					address: '',
					//行业
					industry: ''
				},
				//勾选
				showradio: true
			};
		},
		methods: {
			getarea() {
				this.$api.area().then(res => {
					console.log(res)
					this.addList = res.data
				})
			},
			addString(e) {
				console.log(e)
				this.form.address = e.province.label + e.city.label + e.area.label
			},
			codeChange(text) {
							this.tips = text;
						},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$api.send({mobile:this.form.iphone}).then(res=>{
						console.log('111',res)
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					})
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	this.$u.toast('验证码已发送');
					
					// }, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			},
			//提交
			submit() {
				if(this.showradio) {
					this.$api.attract(this.form).then(res=>{
						console.log('333',res)
						this.$msg(res.msg)
						this.form={}
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},800)
					})
				}else {
					this.$msg('未勾选保护协议')
				}
			
			}
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #FFFDF4;
	}

	.addbox {
		display: flex;
		justify-content: space-between;
		width: 48%;
		line-height: 100rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
	}

	.industrybox {
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		// border: 2rpx solid #DDDDDD;
		line-height: 100rpx;
	}

	.hrefbox {
		color: #379DE1;
		text-decoration: underline;
	}

	.subBtn {
		width: 80%;
		height: 90rpx;
		background: #FEC242;
		border-radius: 45rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
		margin: 40rpx auto;
	}
</style>
